<template>
  <Popup>
    <div class="box grid hfull">
      <div class="overflow-x-hidden overflow-y-hidden border-1 b-b-1 border-solid border-[var(--el-border-color)]">
        <el-input v-model="keyword" class="wfull" placeholder="请输入关键字" />
        <div class="h-[calc(100%-30px)] overflow-x-hidden overflow-y-auto">
          <el-tree ref="treeRef"
            :data="treeData"
            :filter-node-method="filterNodeMethod"
            empty-text="无数据"
            default-expand-all
            @node-click="onNodeClick">
            <template #default="{ node, data }">
              <div class="flex gap2">
                <Icon :icon="data.value.endsWith(':') ? 'eos-icons:organization' : 'mdi:user'"/>
                <span>{{ node.label }}<span v-if="switchToLoginId == data.value">(已切换)</span></span>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="p2 border-1 b-b-1 border-solid border-[var(--el-border-color)]">
        <el-descriptions v-if="currentNode && isOrganization" title="组织信息" border :column="2" class="mb-10px">
          <el-descriptions-item label="登录ID">【{{ currentNode.value }}】</el-descriptions-item>
          <el-descriptions-item label="编码">{{ currentNode.data.code }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ currentNode.data.name }}</el-descriptions-item>
          <el-descriptions-item label="截止日期">{{ currentNode.data.expireDate }}</el-descriptions-item>
          <el-descriptions-item label="是否可用">{{ currentNode.data.usable == 'yes' ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item label="是否能登录">{{ currentNode.data.loginable == 'yes' ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item label="是否启用">{{ currentNode.data.enable == 'yes' ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item label="编制">{{ currentNode.data.clerkSize }}</el-descriptions-item>
          <el-descriptions-item label="原因">{{ currentNode.data.reason }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions v-if="currentNode && !isOrganization" title="用户信息" border :column="2" class="mb-10px">
          <el-descriptions-item label="登录ID">【{{ currentNode.value }}】</el-descriptions-item>
          <el-descriptions-item label="头像">
            <Avatar :filepath="currentNode.data.avatar"/>
          </el-descriptions-item>
          <el-descriptions-item label="姓名">{{ currentNode.data.name }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{ currentNode.data.username }}</el-descriptions-item>
          <el-descriptions-item label="截止日期">{{ currentNode.data.expireDate }}</el-descriptions-item>
          <el-descriptions-item label="是否可用">{{ currentNode.data.usable == 'yes' ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item label="是否能登录">{{ currentNode.data.loginable == 'yes' ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item label="是否启用">{{ currentNode.data.enable == 'yes' ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="是否激活">{{ currentNode.data.active == 'yes' ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="原因">{{ currentNode.data.reason }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <template #footer="{ close }">
      <div class="flex justify-center items-center">
        <el-button type="primary" :disabled="currentNode?.value && switchToLoginId == currentNode?.value" @click="switchTo">切换</el-button>
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </Popup>
</template>
<script setup lang="ts">
  import { ElTree, ElDescriptions, ElDescriptionsItem, ElButton, ElInput, type TreeInstance } from 'element-plus'
  import { Popup } from '@/components/Popup'
  import { useUserStore } from '@/store';
  import { switchableApi, switchToApi } from '@/api';
  import feedback from '@/utils/feedback';
  import { computed, onMounted, ref, watch } from 'vue';
  import { Avatar } from '@/components/avatar';
  import { Icon } from '@/components/Icon';

  const userStore = useUserStore()

  const treeRef = ref<TreeInstance>()
  const treeData = ref([])
  const keyword = ref('')
  const filterNodeMethod = (value: string, data) => {
    if (!value) return true
    return data.label.includes(value) || data.value.includes(value)
  }
  watch(keyword, (val) => treeRef.value!.filter(val))

  const isOrganization = computed(() =>  currentNode.value.value ? currentNode.value.value.endsWith(':') : false)
  const switchToLoginId = computed(() => userStore.getSwitchTo?.account?.loginId)
  const currentNode = ref()
  function onNodeClick(node) {
    currentNode.value = node
  }

  async function switchTo() {
    const loginId = currentNode.value?.value
    if(!loginId) {
      feedback.alertError('请选择要切换的节点')
      return
    }

    if(switchToLoginId.value == loginId) return

    console.log('loginId==========', loginId)
    const data = await switchToApi(loginId)
    console.log('switchTo===', data)
    await userStore.switchTo(data)

    feedback.msgSuccess('操作成功')
  }

  onMounted(async () => {
    const res = await switchableApi()
    treeData.value = res.data
  })
</script>
<style lang="less" scoped>
  .box {
    grid-template-columns: 28% auto;
    grid-template-rows: auto;
    column-gap: 2px
  }
</style>
